<template>
  <div class="index">
    <div class="top">
      <div class="top_l">
        <div class="one">
          <div>
            <p>当日用电量<span>(Kwh)</span></p>
            <p><span>2.7</span>万</p>
          </div>
          <div>
            <p>拆标<span>(Kgce)</span></p>
            <p><span>3,354.1 </span></p>
          </div>
        </div>
        <div class="one">
          <div>
            <p>当月用电量<span>(Kwh)</span></p>
            <p><span>48.5</span>万</p>
          </div>
          <div>
            <p>拆标<span>(Kgce)</span></p>
            <p><span>6 </span>万</p>
          </div>
        </div>
        <div class="one">
          <div>
            <p>当年用电量<span>(Kwh)</span></p>
            <p><span>422.6</span>万</p>
          </div>
          <div>
            <p>拆标<span>(Kgce)</span></p>
            <p><span>51.9</span>万</p>
          </div>
        </div>
        <div class="one">
          <div>
            <p>当年发电量<span>(Kwh)</span></p>
            <p><span>0</span>万</p>
          </div>
          <div>
            <p>当年发电拆标<span>(Kgce)</span></p>
            <p><span>0</span>万</p>
          </div>
        </div>
      </div>
      <div class="top_r">
        <div class="btn" @click="off">关闭</div>
      </div>
    </div>
    <div class="main">
      <div class="main_l">
        <h4>能源流向分析</h4>
        <div class="echarts">
          <div id="analyze"></div>
        </div>
      </div>
      <div class="main_r">
        <h4>设备损耗</h4>
        <div class="main_r_t">
          <p>变压器损耗<span>(Kwh)</span><br /><b>0.8</b>万</p>
          <p>线路损耗<span>(Kwh)</span><br /><b>3,908</b></p>
        </div>
        <div id="wastage"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
// 返回
let emit = defineEmits(["off"]);
let off = () => {
  emit("off", false);
};
// 能源流向分析
let color = "#fff";
let analyzeChart = ref(null);
let analyzeFn = () => {
  var data = {
    nodes: [
      {
        name: "F14",
        itemStyle: {
          color: "#0058bf",
          borderColor: "#1050a0",
        },
      },
      {
        name: "F19",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "2-3",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "2-1",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "1-3",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "1-1",

        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "2-4",

        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "2-2",

        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "1-4",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "1-2",
        itemStyle: {
          color: "#2fb8c6",
          borderColor: "#2fb8c6",
        },
      },
      {
        name: "1-2N3",
        itemStyle: {
          color: "#b843bd",
          borderColor: "#b843bd",
        },
      },
      {
        name: "1-2N2",
        itemStyle: {
          color: "#b843bd",
          borderColor: "#b843bd",
        },
      },
      {
        name: "1-3N3",
        itemStyle: {
          color: "#b843bd",
          borderColor: "#b843bd",
        },
      },
      {
        name: "1-2N4",
        itemStyle: {
          color: "#b843bd",
          borderColor: "#b843bd",
        },
      },
      {
        name: "备用",
        // category: 2,
        itemStyle: {
          color: "#b843bd",
          borderColor: "#b843bd",
        },
      },
    ],
    links: [
      {
        source: "F14",
        target: "2-3",
        value: 20,
      },
      {
        source: "F14",
        target: "2-1",
        value: 20,
      },
      {
        source: "F14",
        target: "1-3",
        value: 20,
      },
      {
        source: "F14",
        target: "1-1",
        value: 20,
      },
      {
        source: "F19",
        target: "2-4",
        value: 20,
      },
      {
        source: "F19",
        target: "2-2",
        value: 20,
      },
      {
        source: "F19",
        target: "1-4",
        value: 20,
      },
      {
        source: "F19",
        target: "1-2",
        value: 20,
      },
      {
        source: "2-1",
        target: "1-2N3",
        value: 6,
      },
      {
        source: "2-1",
        target: "1-2N2",
        value: 8,
      },
      {
        source: "2-1",
        target: "1-3N3",
        value: 14,
      },
      {
        source: "2-1",
        target: "1-2N4",
        value: 4,
      },
      {
        source: "2-1",
        target: "备用",
        value: 2,
      },
    ],
  };
  let option = {
    series: {
      type: "sankey",
      left: "10%",
      nodeAlign: "left",
      layout: "none", // 禁用自动布局
      dataSort: "none", // 禁用数据排序
      nodeWidth: 30, // 节点的宽度
      nodeGap: 10, // 节点之间的间距
      emphasis: {
        disabled: true,
      },
      label: {
        position: "right",
        distance: 20,
        fontSize: 16,
        lineHeight: 20,
        color: "rgba(255, 255, 255, 1)",
      },

      data: data.nodes,
      links: data.links,
    },
  };
  analyzeChart = echarts.init(document.getElementById("analyze"));
  analyzeChart.setOption(option);
  analyzeChart.on("click", (params) => {
    if (params.dataType == "node") {
      var newdata = {
        nodes: [
          {
            name: "F14",
            itemStyle: {
              color: "#0058bf",
              borderColor: "#1050a0",
            },
          },
          {
            name: "F19",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "2-3",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "2-1",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "1-3",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "1-1",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "2-4",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "2-2",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "1-4",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "1-2",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
          {
            name: "2-2b3",
            itemStyle: {
              color: "#2fb8c6",
              borderColor: "#2fb8c6",
            },
          },
        ],
        links: [
          {
            source: "F14",
            target: "2-3",
            value: 1,
          },
          {
            source: "F14",
            target: "2-1",
            value: 1,
          },
          {
            source: "F14",
            target: "1-3",
            value: 1,
          },
          {
            source: "F14",
            target: "1-1",
            value: 1,
          },
          {
            source: "F19",
            target: "2-4",
            value: 1,
          },
          {
            source: "F19",
            target: "2-2",
            value: 1,
          },
          {
            source: "F19",
            target: "1-4",
            value: 1,
          },
          {
            source: "F19",
            target: "1-2",
            value: 1,
          },
          {
            source: "2-3",
            target: "2-2b3",
            value: 1,
          },
        ],
      };
      console.log(newdata.links[newdata.links.length - 1].source);
      switch (params.name) {
        case "2-3":
          newdata.links[newdata.links.length - 1].source = "2-3";
          data = newdata;
          option.series.data = data.nodes;
          option.series.links = data.links;
          analyzeChart.clear();
          analyzeChart.setOption(option, { notMerge: true });
          break;
        case "2-1":
          newdata.links[newdata.links.length - 1].source = "2-1";
          data = newdata;
          option.series.data = data.nodes;
          option.series.links = data.links;
          analyzeChart.clear();
          analyzeChart.setOption(option, { notMerge: true });
      }
    }
  });
};
let wastageChart = ref(null);
let wastageFn = () => {
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      width: 22,
      bottom: "20%",
      left: "10%",
      fontSize: 18,
      formatter: function (name) {
        let v;
        // console.log(option.series[0].data);
        option.series[0].data.forEach((item) => {
          if (item.name === name) {
            v = item.value;
          }
        });
        return v + "\n " + name;
      },
      textStyle: {
        color: color,
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        center: ["50%", "30%"],
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#fff",
          borderWidth: 15,
        },
        label: {
          show: true,
          position: "center",
          formatter: "全部用电\n回路占比",
          fontWeight: "bold",
          fontSize: 18,
          color: color,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 25.3, name: "Search Engine" },
          { value: 21.6, name: "Direct" },
          { value: 15.4, name: "Email" },
          { value: 14.7, name: "Union Ads" },
          { value: 12.7, name: "Video Ads" },
          { value: 10.3, name: "Video AdsOne" },
        ],
      },
      {
        type: "pie",
        center: ["50%", "30%"],
        radius: ["72%", "73.5%"],
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "#20394f",
            },
          },
        ],
      },
    ],
  };
  wastageChart = echarts.init(document.getElementById("wastage"));
  wastageChart.setOption(option);
};
onMounted(() => {
  window.addEventListener("resize", () => {
    analyzeChart.resize();
    wastageChart.resize();
  });
  analyzeFn();
  wastageFn();
});
onUnmounted(() => {
  analyzeChart.dispose();
  wastageChart.dispose();
});
</script>
<style scoped>
.index {
  font-size: 18px;
  margin: 2rem 2rem;
  color: var(--text-color);
}
.top {
  display: flex;
  justify-content: space-between;
}
.top .one {
  width: 3rem;
}
.top .one:last-child {
  width: 5rem;
}
.btn {
  flex: 0.5rem 0 0;
  color: var(--text-color);
  /* padding: 0.02rem; */
  text-align: center;
  background:rgb(6, 29, 239);
}
.top_l {
  display: flex;
  justify-content: start;
}
.one {
  display: flex;
}
.one > div {
  margin: 0 0.5rem 0 0;
}
.one > div > p {
  /* width: 15vw; */
  font-size: 14px;
}
.one > p:last-child {
  width: 8rem;
}
.one p:first-child span {
  font-size: 12px;
}
.one p:last-child span:first-child {
  font-size: 18px;
  color: #a7bf65;
}
.one p:last-child span:last-child {
  font-size: 18px;
  color: #9564ad;
}
.top_r {
  margin: 0 5rem 0 0;
  flex: 0.5rem 0 0;
}
.top_r .btn{
  font-size: 16px;
  width: 0.5rem;
  height: 0.25rem;
  line-height: 0.25rem;
}
.main {
  display: flex;
  padding: 0.1rem 0 0 0;
}
.main_l {
  flex: 2.5;
}
.main_r {
  flex: 1;
}
.echarts > div {
  width: 100%;
  height: 6.5rem;
}
.main_r_t {
  padding: 0.1rem 0 0 0;
  display: flex;
}
.main_r_t p {
  width: 2rem;
}
#wastage {
  width: 2.5rem;
  height: 6.5rem;
}
</style>
